WebXR разпознаване на равнини: Овладяване на разпознаването на повърхности и AR позициониране за глобална аудитория

WebXR предлага мощен портал за създаване на завладяващи изживявания с добавена реалност (AR) директно в уеб браузърите. Крайъгълен камък на много AR приложения е разпознаването на равнини, което позволява на вашето приложение да разбира реалната среда и безпроблемно да интегрира виртуално съдържание. Тази блог публикация предоставя изчерпателно ръководство за разпознаването на равнини в WebXR, като се фокусира върху разпознаването на повърхности, техниките за AR позициониране и най-добрите практики за създаване на приобщаващи и производителни изживявания, които резонират с глобална аудитория.

Какво е WebXR разпознаване на равнини?

Разпознаването на равнини е процесът на идентифициране и разбиране на плоски повърхности във физическата среда на потребителя с помощта на сензорите на устройството (обикновено камера и сензори за движение). WebXR използва тези сензорни данни, заедно с алгоритми за компютърно зрение, за да локализира и проследява хоризонтални и вертикални равнини, като подове, маси, стени и дори тавани.

След като бъде открита равнина, WebXR приложението може да използва тази информация, за да:

• Закрепва виртуални обекти към реалния свят, карайки ги да изглеждат така, сякаш наистина присъстват в средата.
• Позволява интерактивни изживявания, при които потребителите могат да манипулират виртуални обекти спрямо реални повърхности.
• Осигурява реалистично осветление и сенки въз основа на възприетата среда.
• Имплементира откриване на сблъсъци между виртуални обекти и реални повърхности.

Защо разпознаването на равнини е важно за WebXR?

Разпознаването на равнини е от решаващо значение за създаването на завладяващи и правдоподобни AR изживявания. Без него виртуалните обекти просто биха се носели в пространството, откъснати от заобикалящата среда на потребителя, нарушавайки илюзията за добавена реалност.

Чрез точното откриване и разбиране на повърхностите, разпознаването на равнини ви позволява да създавате AR приложения, които са:

• Потапящи: Виртуалните обекти се усещат така, сякаш наистина са част от реалния свят.
• Интерактивни: Потребителите могат да взаимодействат с виртуални обекти по естествен и интуитивен начин.
• Полезни: AR приложенията могат да предоставят практически решения за реални проблеми, като например визуализиране на мебели в стая или измерване на разстояния между обекти.
• Достъпни: WebXR и разпознаването на равнини дават възможност за AR изживявания, които са достъпни на различни устройства, без да се изисква потребителите да изтеглят специално приложение.

Как работи WebXR разпознаването на равнини

WebXR разпознаването на равнини обикновено включва следните стъпки:

1. Заявяване на проследяване на равнини: WebXR приложението изисква достъп до AR възможностите на устройството, включително проследяване на равнини.
2. Получаване на XRFrame: На всеки кадър приложението получава обект `XRFrame`, който предоставя информация за текущото състояние на AR сесията, включително позата на камерата и откритите равнини.
3. Заявка за TrackedPlanes: Обектът `XRFrame` съдържа списък с обекти `XRPlane`, всеки от които представлява открита равнина в сцената.
4. Анализиране на данните от XRPlane: Всеки обект `XRPlane` предоставя информация за равнината:
• Ориентация: Дали равнината е хоризонтална или вертикална.
• Позиция: Позицията на равнината в 3D света.
• Размери: Ширината и височината на равнината.
• Полигон: Граничен полигон, представляващ формата на откритата равнина.
• Време на последна промяна: Времеви печат, указващ кога последно са актуализирани свойствата на равнината.
5. Рендиране и взаимодействие: Приложението използва тази информация, за да рендира виртуални обекти върху откритите равнини и да позволи взаимодействие с потребителя.

WebXR API за разпознаване на равнини и примери за код

Нека разгледаме някои примери за код, използващи JavaScript и популярна WebXR библиотека като Three.js:

Инициализиране на WebXR сесията и заявяване на проследяване на равнини

Първо, трябва да заявите потапяща AR сесия и да посочите, че искате да проследявате откритите равнини:

            
async function initXR() {
  if (navigator.xr) {
    const supported = await navigator.xr.isSessionSupported('immersive-ar');
    if (supported) {
      try {
        session = await navigator.xr.requestSession('immersive-ar', { 
          requiredFeatures: ['plane-detection'] 
        });
        // Setup WebGL renderer and other scene elements
      } catch (error) {
        console.error("Error initializing XR session:", error);
      }
    } else {
      console.log('immersive-ar not supported');
    }
  } else {
    console.log('WebXR not supported');
  }
}

            

              
                Copy
              
            
          

Обработка на XRFrame и TrackedPlanes

Във вашата анимационна верига ще трябва да имате достъп до `XRFrame` и да итерирате през откритите равнини:

            
function animate(time, frame) {
  if (frame) {
    const glLayer = session.renderState.baseLayer;
    renderer.render(scene, camera);

    const xrViewerPose = frame.getViewerPose(xrRefSpace);
    if (xrViewerPose) {
      // Update camera position/rotation based on xrViewerPose

      const planes = session.getWorldInformation().detectedPlanes;
      if (planes) {
        for (const plane of planes) {
          // Access plane data and update the corresponding mesh in your scene
          updatePlaneMesh(plane);
        }
      }
    }
  }
  session.requestAnimationFrame(animate);
}

            

              
                Copy
              
            
          

Създаване на мрежа (Mesh) за всяка открита равнина

За да визуализирате откритите равнини, можете да създадете проста мрежа (например `THREE.Mesh`) и да актуализирате нейната геометрия въз основа на размерите и полигона на `XRPlane`. Може да се наложи да използвате помощна функция, която преобразува върховете на полигона в подходящ формат на геометрията за вашия рендъринг енджин.

            
function updatePlaneMesh(plane) {
  if (!planeMeshes.has(plane.id)) {
    // Create a new mesh if it doesn't exist
    const geometry = new THREE.PlaneGeometry(plane.width, plane.height);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
    const mesh = new THREE.Mesh(geometry, material);
    mesh.userData.plane = plane;

    scene.add(mesh);
    planeMeshes.set(plane.id, mesh);
  } else {
    // Update the existing mesh's geometry based on plane extents.
    const mesh = planeMeshes.get(plane.id);
    const planeGeometry = mesh.geometry;
    planeGeometry.width = plane.width;
    planeGeometry.height = plane.height;
    planeGeometry.needsUpdate = true;

    //Position and orientation of the plane.
    const pose = frame.getPose(plane.planeSpace, xrRefSpace);
    mesh.position.set(pose.transform.position.x,pose.transform.position.y,pose.transform.position.z);
    mesh.quaternion.set(pose.transform.orientation.x,pose.transform.orientation.y,pose.transform.orientation.z,pose.transform.orientation.w);
  }


}

            

              
                Copy
              
            
          

Техники за AR позициониране: Закрепване на виртуални обекти

След като сте открили равнини, можете да закрепите виртуални обекти към тях. Това включва поставянето на виртуалните обекти в правилната позиция и ориентация спрямо откритата равнина. Има няколко начина да постигнете това:

Лъчево трасиране (Raycasting)

Лъчевото трасиране включва изпращане на лъч от устройството на потребителя (обикновено от центъра на екрана) в сцената. Ако лъчът пресече открита равнина, можете да използвате точката на пресичане, за да позиционирате виртуалния обект. Това позволява на потребителя да докосне екрана, за да постави обект на желана повърхност.

            
function placeObject(x, y) {
  const raycaster = new THREE.Raycaster();
  const mouse = new THREE.Vector2();

  mouse.x = (x / renderer.domElement.clientWidth) * 2 - 1;
  mouse.y = -(y / renderer.domElement.clientHeight) * 2 + 1;

  raycaster.setFromCamera(mouse, camera);

  const intersects = raycaster.intersectObjects(scene.children, true); //Recursively search for intersections.

  if (intersects.length > 0) {
    // Place the object at the intersection point
    const intersection = intersects[0];
    const newObject = createVirtualObject();
    newObject.position.copy(intersection.point);

    //Adjust orientation of the object as required
    newObject.quaternion.copy(camera.quaternion);
    scene.add(newObject);
  }
}

            

              
                Copy
              
            
          

Използване на Hit-Test API (ако е наличен)

WebXR Hit-Test API предоставя по-директен начин за намиране на пресичания между лъч и реалния свят. Той ви позволява да изпратите лъч от гледната точка на потребителя и да получите списък с обекти `XRHitResult`, всеки от които представлява пресичане с реална повърхност. Това е по-ефективно и точно от разчитането само на открити равнини.

            
async function createHitTestSource() {
  hitTestSource = await session.requestHitTestSource({
    space: xrRefSpace
  });
}

function placeObjectAtHit() {
  if (hitTestSource) {
    const hitTestResults = frame.getHitTestResults(hitTestSource);
    if (hitTestResults.length > 0) {
      const hit = hitTestResults[0];
      const pose = hit.getPose(xrRefSpace);

      // Create or update the virtual object
      const newObject = createVirtualObject();
      newObject.position.set(pose.transform.position.x,pose.transform.position.y,pose.transform.position.z);
      newObject.quaternion.set(pose.transform.orientation.x,pose.transform.orientation.y,pose.transform.orientation.z,pose.transform.orientation.w);
      scene.add(newObject);
    }
  }
}

            

              
                Copy
              
            
          

Закрепване към границите на равнината

Можете също да използвате полигона, представляващ границата на равнината, за да позиционирате обекти по краищата или във вътрешността на откритата равнина. Това може да бъде полезно за поставяне на виртуални обекти в специфична конфигурация спрямо равнината.

Оптимизиране на WebXR разпознаването на равнини за глобални устройства

WebXR приложенията трябва да работят гладко на широк спектър от устройства, от висок клас смартфони до по-малко мощни мобилни устройства. Оптимизирането на вашата имплементация за разпознаване на равнини е от решаващо значение за осигуряването на добро потребителско изживяване при различни хардуерни конфигурации.

Съображения за производителност

• Ограничете броя на равнините: Проследяването на твърде много равнини може да бъде изчислително скъпо. Помислете за ограничаване на броя на равнините, които вашето приложение активно проследява, или дайте приоритет на равнините, които са най-близо до потребителя.
• Оптимизирайте геометрията на мрежата на равнината: Използвайте ефективни геометрични представяния за мрежите на равнините. Избягвайте прекомерни детайли или ненужни върхове.
• Използвайте WebAssembly: Помислете за използването на WebAssembly (WASM) за изпълнение на изчислително интензивни задачи, като алгоритми за разпознаване на равнини или персонализирани рутини за компютърно зрение. WASM може да осигури значителни подобрения в производителността в сравнение с JavaScript.
• Намалете натоварването при рендиране: Оптимизирането на рендирането на цялата ви сцена, включително виртуални обекти и мрежи на равнини, е от решаващо значение. Използвайте техники като ниво на детайлност (LOD), occlusion culling и компресия на текстури, за да намалите натоварването при рендиране.
• Профилирайте и оптимизирайте: Редовно профилирайте вашето приложение с помощта на инструментите за разработчици на браузъра, за да идентифицирате тесните места в производителността. Оптимизирайте кода си въз основа на резултатите от профилирането.

Кросплатформена съвместимост

• Откриване на функционалности: Използвайте откриване на функционалности, за да проверите дали устройството поддържа разпознаване на равнини, преди да се опитате да го използвате. Осигурете резервни механизми или алтернативни изживявания за устройства, които не поддържат разпознаване на равнини.
• ARCore и ARKit: WebXR имплементациите обикновено разчитат на базови AR рамки като ARCore (за Android) и ARKit (за iOS). Бъдете наясно с разликите във възможностите за разпознаване на равнини и производителността между тези рамки.
• Оптимизации, специфични за устройството: Помислете за внедряване на специфични за устройството оптимизации, за да се възползвате от уникалните възможности на различните устройства.

Съображения за достъпност

От съществено значение е WebXR AR изживяванията да бъдат достъпни за потребители с увреждания. За разпознаването на равнини вземете предвид следното:

• Визуална обратна връзка: Осигурете ясна визуална обратна връзка, когато е открита равнина, като например подчертаване на равнината с различен цвят или модел. Това може да помогне на потребители с увредено зрение да разберат средата.
• Звукова обратна връзка: Осигурете звукова обратна връзка, за да укажете кога е открита равнина, като например звуков ефект или устно описание на ориентацията и размера на равнината.
• Алтернативни методи за въвеждане: Осигурете алтернативни методи за въвеждане за поставяне на виртуални обекти, като гласови команди или въвеждане от клавиатура, в допълнение към жестовете с докосване.
• Регулируемо позициониране: Позволете на потребителите да регулират позицията и ориентацията на виртуалните обекти, за да отговорят на техните индивидуални нужди и предпочитания.

Най-добри практики за глобална разработка на WebXR разпознаване на равнини

Разработването на приложения за WebXR разпознаване на равнини за глобална аудитория изисква внимателно обмисляне на културните различия, езиковата поддръжка и различните възможности на устройствата. Ето някои най-добри практики:

• Локализация: Локализирайте текстовото и аудио съдържанието на вашето приложение, за да поддържате различни езици. Използвайте подходящи формати за дата и числа за различните региони.
• Културна чувствителност: Бъдете внимателни към културните различия в начина, по който потребителите възприемат и взаимодействат с AR изживяванията. Избягвайте използването на културно чувствителни символи или изображения.
• Достъпност: Следвайте насоките за достъпност, за да се уверите, че вашето приложение е използваемо от хора с увреждания.
• Оптимизация на производителността: Оптимизирайте производителността на вашето приложение, за да се уверите, че работи гладко на широк спектър от устройства.
• Тестване: Тествайте щателно вашето приложение на различни устройства и в различни среди, за да идентифицирате и отстраните всякакви проблеми. Помислете за включване на потребители от различни региони и културен произход във вашия процес на тестване.
• Поверителност: Ясно съобщавайте на потребителите как се използват техните данни и се уверете, че спазвате съответните разпоредби за поверителност.
• Предоставете ясни инструкции: Предоставете ясни и кратки инструкции за това как да използвате приложението, като вземете предвид различните нива на техническа грамотност.

Примери за приложения с WebXR разпознаване на равнини

WebXR разпознаването на равнини може да се използва за създаване на голямо разнообразие от AR приложения, включително:

• Визуализация на мебели: Позволява на потребителите да визуализират как биха изглеждали мебелите в домовете им, преди да направят покупка. IKEA Place е добре познат пример.
• Игри: Създава потапящи AR игрови изживявания, в които виртуални герои и обекти взаимодействат с реалния свят.
• Образование: Предоставя интерактивни образователни изживявания, в които учениците могат да изследват 3D модели и симулации в собствената си среда. Например, визуализиране на слънчевата система на маса.
• Индустриални приложения: Позволява на работниците да визуализират инструкции, чертежи и друга информация директно в своето зрително поле, подобрявайки ефективността и точността.
• Търговия на дребно: Позволява на клиентите да пробват виртуални дрехи или аксесоари, преди да ги купят. Sephora Virtual Artist е добър пример.
• Инструменти за измерване: Позволява на потребителите да измерват разстояния и площи в реалния свят с помощта на мобилните си устройства.

Бъдещето на WebXR разпознаването на равнини

WebXR разпознаването на равнини е бързо развиваща се област. Тъй като устройствата стават все по-мощни и алгоритмите за компютърно зрение се подобряват, можем да очакваме да видим още по-точни и надеждни възможности за разпознаване на равнини в бъдеще. Някои потенциални бъдещи разработки включват:

• Подобрена точност на разпознаването на равнини: По-точно и надеждно разпознаване на равнини, дори в предизвикателни среди.
• Семантично разбиране: Способността да се разбира семантичното значение на откритите равнини, като например разграничаване между различни видове повърхности (напр. дърво, метал, стъкло).
• Реконструкция на сцената: Способността да се създаде 3D модел на цялата среда, а не само на плоски повърхности.
• Разпознаване на равнини, задвижвано от AI: Използване на изкуствен интелект и машинно обучение за подобряване на производителността и точността на разпознаването на равнини.
• Интеграция с облачни услуги: Интеграция с облачни услуги, за да се даде възможност за съвместни AR изживявания и споделени виртуални пространства.

Заключение

WebXR разпознаването на равнини е мощна технология, която позволява създаването на потапящи и интерактивни AR изживявания директно в уеб браузърите. Овладявайки техниките за разпознаване на повърхности и AR позициониране, разработчиците могат да създават завладяващи приложения, които резонират с глобална аудитория. Като вземете предвид оптимизацията на производителността, достъпността и културната чувствителност, можете да гарантирате, че вашите WebXR приложения са използваеми и приятни за хора от цял свят.

Тъй като технологията WebXR продължава да се развива, разпознаването на равнини ще играе все по-важна роля в оформянето на бъдещето на добавената реалност. Продължавайте да експериментирате, бъдете любопитни и продължавайте да разширявате границите на възможното с WebXR!